<script setup>
import { ref, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/useUserStore";
import { updatePasswordAPI } from "@/api/user";
import { ElMessage } from "element-plus";

const router = useRouter();
const userStore = useUserStore();

const password = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
const rules = ref({
  oldPassword: [
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { pattern: /^\S{6,15}$/, message: "密码必须是6-16位非空字符！", trigger: "blur" },
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { pattern: /^\S{6,15}$/, message: "密码必须是6-16位非空字符！", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value === password.value.oldPassword) return callback(new Error("新密码不能与旧密码相同"));
        return callback();
      },
      trigger: "blur",
    },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    { pattern: /^\S{6,15}$/, message: "密码必须是6-16位非空字符！", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== password.value.newPassword) return callback(new Error("两次输入密码不一致"));
        return callback();
      },
      trigger: "blur",
    },
  ],
});
const formRef = ref();
let timer = null;
let timers = null;
const onSubmit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const res = await updatePasswordAPI(password.value);
      if (res.code === 0) {
        ElMessage({ type: "success", message: "修改成功" });
        userStore.clearToken();
        userStore.clearUserInfo();
        timer = setTimeout(() => {
          router.replace("/login");
        }, 3000);
        timers = setTimeout(() => {
          ElMessage({ message: "本地数据已清除，即将跳转登录页" });
        }, 2000);
        return;
      }
      clearPassword();
      return ElMessage({ type: "error", message: res.message });
    } else {
      for (const key in fields) {
        ElMessage({ type: "error", message: fields[key][0].message });
      }
      clearPassword();
    }
  });
};
// 清除密码
const clearPassword = () => {
  password.value.oldPassword = "";
  password.value.newPassword = "";
  password.value.confirmPassword = "";
};
onUnmounted(() => {
  clearTimeout(timer);
  clearTimeout(timers);
});
</script>
<template>
  <PageContainer title="更新密码">
    <el-card>
      <el-form ref="formRef" :rules="rules" :model="password" label-width="100px" size="large">
        <el-form-item label="旧密码：" prop="oldPassword">
          <el-input type="password" v-model="password.oldPassword" style="width: 50%" />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input type="password" v-model="password.newPassword" clearable style="width: 50%" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="confirmPassword">
          <el-input type="password" v-model="password.confirmPassword" clearable style="width: 50%" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </PageContainer>
</template>
<style lang="sass" scoped></style>
